import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Animated } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import { useChat } from '../contexts/ChatContext';

const EmotionAnalysis = ({ message }) => {
  const { userEmotion } = useChat();
  const [emotion, setEmotion] = useState(userEmotion);
  const [animation] = useState(new Animated.Value(0));

  useEffect(() => {
    // 启动动画
    Animated.timing(animation, {
      toValue: 1,
      duration: 500,
      useNativeDriver: false
    }).start();
  }, [message, animation]);

  return (
    <Animated.View 
      style={[
        styles.container,
        { opacity: animation }
      ]}
    >
      <View style={styles.emotionBar}>
        <View style={[
          styles.emotionIndicator,
          { 
            width: getEmotionWidth(emotion),
            backgroundColor: getEmotionColor(emotion)
          }
        ]} />
      </View>
      <View style={styles.emotionInfo}>
        <FontAwesome 
          name={getEmotionIcon(emotion)} 
          size={18} 
          color={getEmotionColor(emotion)} 
        />
        <Text style={[
          styles.emotionText,
          { color: getEmotionColor(emotion) }
        ]}>
          {getEmotionLabel(emotion)}
        </Text>
      </View>
    </Animated.View>
  );
};

// 辅助函数
const getEmotionIcon = (emotion) => {
  switch(emotion) {
    case 'positive':
      return 'smile-o';
    case 'negative':
      return 'frown-o';
    case 'excited':
      return 'bolt';
    case 'sad':
      return 'cry';
    case 'angry':
      return 'angry';
    default:
      return 'meh-o';
  }
};

const getEmotionColor = (emotion) => {
  switch(emotion) {
    case 'positive':
      return '#10B981'; // 绿色
    case 'negative':
      return '#EF4444'; // 红色
    case 'excited':
      return '#F59E0B'; // 橙色
    case 'sad':
      return '#3B82F6'; // 蓝色
    case 'angry':
      return '#DC2626'; // 深红色
    default:
      return '#6B7280'; // 灰色
  }
};

const getEmotionLabel = (emotion) => {
  switch(emotion) {
    case 'positive':
      return '积极';
    case 'negative':
      return '消极';
    case 'excited':
      return '兴奋';
    case 'sad':
      return '悲伤';
    case 'angry':
      return '愤怒';
    default:
      return '中性';
  }
};

const getEmotionWidth = (emotion) => {
  switch(emotion) {
    case 'positive':
    case 'negative':
      return '80%';
    case 'excited':
    case 'sad':
    case 'angry':
      return '95%';
    default:
      return '50%';
  }
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 100,
    left: 16,
    right: 16,
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    borderRadius: 8,
    padding: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 2,
    zIndex: 10
  },
  emotionBar: {
    height: 6,
    backgroundColor: '#E5E7EB',
    borderRadius: 3
  },
  emotionIndicator: {
    height: 6,
    borderRadius: 3
  },
  emotionInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 4
  },
  emotionText: {
    marginLeft: 4,
    fontSize: 12,
    fontWeight: '500'
  }
});

export default EmotionAnalysis;    